<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flotSpline</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jqvmap.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.vmap.js"></script>
    <script type="text/javascript" src="js/jquery.vmap.world.js"></script>
    <script type="text/javascript" src="js/jquery.vmap.sampledata.js"></script>
</head>
<body>
<div class="dashboard">
    <div class="row">
        <!-- vmap start -->
        <div class="col-lg-7">
           <div id="vmap" class="maps">
              <div class="jqvmap-zoomin">+</div>
              <div class="jqvmap-zoomout">−</div>
            </div>
        </div>
        <!-- vmap end-->
        <!-- panel start -->
        <div class="col-lg-5">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="text-center">数据中心</h3>
                        </div>
                        <div class="panel-body">
                            <div class="col-xs-6">
                                <div class="text-center">
                                    <h6>机房</h6>
                                    <h6>2</h6>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="text-center clearfix">
                                    <h6>机柜</h6>
                                    <h6>15</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="text-center">设备</h3>
                        </div>
                        <div class="panel-body">
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>物理机</h6>
                                    <h6>30</h6>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>虚拟机</h6>
                                    <h6>301</h6>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>网络</h6>
                                    <h6>407</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="text-center">云设备</h3>
                        </div>
                        <div class="panel-body">
                            <div class="text-center clearfix">
                               <h6>云主机</h6>
                               <h6>2</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading"><h3 class="text-center">IPAM</h3></div>
                        <div class="panel-body">
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>IP地址</h6>
                                    <h6>3000</h6>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>域名</h6>
                                    <h6>80</h6>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="text-center clearfix">
                                    <h6>业务</h6>
                                    <h6>13</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- -->
    </div>
    <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12">
         <section class="col-md-4">
            <ul class="list-inline">
               <li class="pull-right">
                  <button class="btn btn-default btn-rounded btn-icon btn-sm">一天</button>
                  </li>
               <li><h5>数据中心U位使用率</h5></li>
            </ul>
            <div class="panel-body">
                 <div id="flot-sp1ine-1" style="height: 210px; padding: 0px; position: relative;"><canvas class="flot-base" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 16px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 110px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 204px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 298px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 392px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 482px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 576px; text-align: center;">12</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 670px; text-align: center;">14</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 764px; text-align: center;">16</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 179px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 149px; left: 1px; text-align: right;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 119px; left: 1px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 90px; left: 1px; text-align: right;">30</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 60px; left: 1px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 30px; left: 1px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 1px; text-align: right;">60</div></div></div><canvas class="flot-overlay" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas></div>
            </div>
         </section>
         <section class="col-md-4">
               <ul class="list-inline">
                   <li class="pull-right">
                       <button class="btn btn-default btn-rounded btn-icon btn-sm">一天</button>
                   </li>
                   <li><h5>数据中心U位使用率</h5></li>
               </ul>
               <div class="panel-body">
                   <div id="flot-sp1ine-2" style="height: 210px; padding: 0px; position: relative;"><canvas class="flot-base" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 16px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 110px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 204px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 298px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 392px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 482px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 576px; text-align: center;">12</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 670px; text-align: center;">14</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 764px; text-align: center;">16</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 179px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 149px; left: 1px; text-align: right;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 119px; left: 1px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 90px; left: 1px; text-align: right;">30</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 60px; left: 1px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 30px; left: 1px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 1px; text-align: right;">60</div></div></div><canvas class="flot-overlay" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas></div>
               </div>
           </section>
         <section class="col-md-4">
               <div id="flot-pie-donut"  style="height:240px"></div>
           </section>
       </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <section class="col-md-4">
                <ul class="list-inline">
                    <li class="pull-right">
                        <button class="btn btn-default btn-rounded btn-icon btn-sm">一天</button>
                    </li>
                    <li><h5>云主机使用情况</h5></li>
                </ul>
                <div class="panel-body">
                    <div id="flot-sp1ine-3" style="height: 210px; padding: 0px; position: relative;"><canvas class="flot-base" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 16px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 110px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 204px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 298px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 392px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 482px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 576px; text-align: center;">12</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 670px; text-align: center;">14</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 764px; text-align: center;">16</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 179px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 149px; left: 1px; text-align: right;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 119px; left: 1px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 90px; left: 1px; text-align: right;">30</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 60px; left: 1px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 30px; left: 1px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 1px; text-align: right;">60</div></div></div><canvas class="flot-overlay" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas></div>
                </div>
            </section>
            <section class="col-md-4">
                <ul class="list-inline">
                    <li class="pull-right">
                        <button class="btn btn-default btn-rounded btn-icon btn-sm">一天</button>
                    </li>
                    <li><h5>网络设备使用情况</h5></li>
                </ul>
                <div class="panel-body">
                    <div id="flot-sp1ine-4" style="height: 210px; padding: 0px; position: relative;"><canvas class="flot-base" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 16px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 110px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 204px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 298px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 392px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 482px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 576px; text-align: center;">12</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 670px; text-align: center;">14</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 764px; text-align: center;">16</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 179px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 149px; left: 1px; text-align: right;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 119px; left: 1px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 90px; left: 1px; text-align: right;">30</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 60px; left: 1px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 30px; left: 1px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 1px; text-align: right;">60</div></div></div><canvas class="flot-overlay" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas></div>
                </div>
            </section>
            <section class="col-md-4">
                <ul class="list-inline">
                    <li class="pull-right">
                        <button class="btn btn-default btn-rounded btn-icon btn-sm">一天</button>
                    </li>
                    <li><h5>IP/域名使用情况</h5></li>
                </ul>
                <div class="panel-body">
                    <div id="flot-sp1ine-5" style="height: 210px; padding: 0px; position: relative;">
                        <canvas class="flot-base" width="777" height="210"
                                style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;">
                        </canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 16px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 110px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 204px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 298px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 392px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 482px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 576px; text-align: center;">12</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 670px; text-align: center;">14</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 86px; top: 192px; left: 764px; text-align: center;">16</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 179px; left: 8px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 149px; left: 1px; text-align: right;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 119px; left: 1px; text-align: right;">20</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 90px; left: 1px; text-align: right;">30</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 60px; left: 1px; text-align: right;">40</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 30px; left: 1px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 1px; text-align: right;">60</div></div></div><canvas class="flot-overlay" width="777" height="210" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 777px; height: 210px;"></canvas></div>
                </div>
            </section>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.spline.js"></script>
<script type="text/javascript" src="js/jquery.flot.tooltip.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="js/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
    $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#ddd',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        selectedRegion: 'MO'
    });
</script>
</body>
</html>